<template>
  <div style="padding-left: 20px; padding-right: 20px;">
    <BasicForm @register="registerForm" ref="formRef" @model-change="handleChange"/>
  </div>
</template>
<script lang="ts" setup>
  import { ref, computed, watch, onMounted } from 'vue';
  import { BasicForm, useForm, FormSchema } from '/@/components/Form/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n('');
  const { createMessage } = useMessage();

  const emit = defineEmits(['change']);
  const props = defineProps({
    record: { type: Object }
  })
  const formRef = ref()
  const inputFormSchemas: FormSchema[] = [
    {
      label: '',
      field: 'id',
      component: 'Input',
      show: false,
    },
    {
      label: t('唯一标识'),
      field: 'code',
      component: 'Input',
      componentProps: {
        maxlength: 200,
      },
    },
    {
      label: t('表单名'),
      field: 'name',
      component: 'Input',
      componentProps: {
        maxlength: 300,
      },
    },
    {
      label: t('提交次数'),
      field: 'submitCount',
      component: 'Input',
      componentProps: {
        maxlength: 0,
      },
    },
    {
      label: t('备注'),
      field: 'remark',
      component: 'InputTextArea',
      componentProps: {
        maxlength: 500,
        showCount: true,
        autoSize: {
          maxRows: 5,
          minRows: 5,
        }
      },
      colProps: { lg: 24, md: 24 },
    },
  ];


const [registerForm, {setProps, resetFields, setFieldsValue, validate, updateSchema}] = useForm({
  labelWidth: 70,
  labelAlign: 'left',
  colon: false,
  schemas: inputFormSchemas,
  showActionButtonGroup: false,
  labelCol: {
    md: { span: 4 },
    sm: { span: 6 },
  },
  compact: true,
  size: 'large',
  wrapperCol: { lg: 24, md: 24 },
});

const handleChange = (val) => {
  emit('change', val)
}

onMounted(() => {
  resetFields()
  setFieldsValue(props.record || {})
})


</script>
